<template>
  <div class="search-suggestion">
    <!-- 搜索建议 -->
    <van-cell  icon="search" v-for="(item, index) in hightOptions" @click="$emit('search', options[index])" :key="index" >
      <div slot="title" v-html="item"></div>
    </van-cell>
  </div>
</template>

<script>
import { getsearch } from '@/api/search'
export default {
  name: 'search-suggestion',
  props: {
    kw: {
      type: String,
      required: true
    }
  },
  watch: {
    kw: {
      handler: 'feachData',
      immediate: true
    }
  },
  data () {
    return {
      options: [],
      hightOptions: []
    }
  },
  methods: {
    async feachData (v) {
      const { options } = await getsearch(v)
      this.options = options
      this.hightOptions = this.kwHight(options)
    },
    kwHight (options) {
      if (options[0] === null || !options.length) return []
      const rexp = options.map(item => {
        const reg = new RegExp(this.kw, 'ig')
        return item.replace(reg, `<span class="active">${this.kw}</span>`)
      })
      return rexp
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-suggestion{
  ::v-deep .van-cell__title{
      .active{
        color: #3296FA;
      }
    }
  }
</style>
